<template>
  <div>
    <el-alert :title="`数据一共${totals}条`" type="info" show-icon />
    <br>
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column prop="catalog" label="目录" />
      <el-table-column prop="questionType" label="题型" :formatter="formatterFn2" />
      <el-table-column prop="question" label="题干">
        <template slot-scope="{row}">
          <p v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间">
        <template slot-scope="{row}">
          {{ row.addDate | dataFilter }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" :formatter="formatterFn" />
      <el-table-column prop="creator" label="录入人" />
      <el-table-column prop="chkState" label="审核状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.chkState === 0" type="warning">待审核</el-tag>
          <el-tag v-if="row.chkState === 1" type="success">已通过</el-tag>
          <el-tag v-if="row.chkState === 2" type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" />
      <el-table-column prop="chkUser" label="审核人" />
      <el-table-column prop="publishState" label="发布状态">
        <template slot-scope="{row}">
          {{ row.publishState === 0 ? '未发布' : '已发布' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="text" size="small" @click="look(row)"> 预览</el-button>
          <el-button type="text" size="small" :disabled="Boolean(row.chkState)" @click="checkFn(row)"> 审核</el-button>
          <el-button type="text" size="small" :disabled="Boolean(row.publishState)" @click="$router.push('/questions/new?id=' + row.id)"> 修改</el-button>
          <el-button v-if="row.publishState" type="text" size="small" @click="sell(row)"> 下架</el-button>
          <el-button v-else type="text" size="small" @click="sell(row)"> 上架</el-button>
          <el-button type="text" size="small" :disabled="Boolean(row.publishState)" @click="del(row.id)"> 删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deltitle } from '@/api/choice'
export default {
  name: 'TabTools',
  props: {
    list: {
      type: Array,
      default: () => ({})
    },
    totals: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 自定义列数据
    formatterFn(row, column, cellValue, index) {
      if (cellValue === '1') return '简单'
      if (cellValue === '2') return '一般'
      if (cellValue === '3') return '困难'
    },
    formatterFn2(row, column, cellValue, index) {
      if (cellValue === '1') return '单选'
      if (cellValue === '2') return '多选'
      if (cellValue === '3') return '简答'
    },
    look(data) {
      this.$emit('look', data)
    },
    checkFn(data) {
      this.$emit('checkFn', data)
    },
    sell(data) {
      this.$emit('sell', data)
    },
    async del(id) {
      try {
        await this.$confirm('确认要删除吗？')
        await deltitle(id)
        this.$message.success('删除成功！')
      } catch (error) {
        console.log(error)
      }
      this.$emit('upload')
    }
  }
}
</script>

<style scoped lang="scss"></style>
